<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <%@ include file="/common/client/header.jsp" %>
    <script src="${ctx}/statics/js/manager/manager.js"></script>
</head>
<body>
<%@ include file="/common/manager/searchBar.jsp" %>
<!--End Header End-->
<div class="i_bg bg_color">
    <!--Begin 用户中心 Begin -->
    <div class="m_content">
        <%@ include file="/common/manager/leftBar.jsp" %>
        <div class="m_right" id="content">
            <div class="mem_tit">分类列表</div>
            <p align="right">
                <a href="javascript:void(0);" class="add_b" id="showButton">添加分类</a>
                <br>
            </p>
            <br>
            <table border="0" class="order_tab" style="width:930px; text-align:center; margin-bottom:30px;"
                   cellspacing="0" cellpadding="0">
                <tbody id="trhood">
            </table>

            <%--分页--%>
            <div class="pages">
                <a class="p_pre" onclick="firstpage()">首页</a>
                <a class="p_pre" onclick="previouspage()">上一页</a>
                <a class="p_pre" onclick="nextpage()">下一页</a>

                <a class="p_pre" onclick="lastpage()">尾页</a>

            </div>
            <%--分页end--%>

            <%--当点击添加分类按钮时显示以下内容进行添加--%>
            <%--            style="display:none;"--%>
            <div id="addClassify" style="display:none;">
                <table border="0" class="add_tab" style="width:930px;" cellspacing="0" cellpadding="0">
                    <tr>
                        <td width="135" align="right">分类级别</td>
                        <td colspan="3" style="font-family:'宋体';">
                            <select name="type" style="background-color:#f6f6f6;" id="type">
                                <option value="0" selected="selected">请选择...</option>
                                <option value="1">
                                    一级分类
                                </option>
                                <option value="2">
                                    二级分类
                                </option>
                                <option value="3">
                                    三级分类
                                </option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td width="135" align="right">一级分类</td>
                        <td colspan="3" style="font-family:'宋体';">
                            <select name="classifyLevel1" style="background-color:#f6f6f6;"
                                    id="classifyLevel1" disabled="disabled">
                                <option value="0" selected="selected">请选择...</option>

                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td width="135" align="right">二级分类</td>
                        <td>
                            <select name="classifyLevel2" style="background-color:#f6f6f6;"
                                    id="classifyLevel2" disabled="disabled">
                                <option value="0" selected="selected">请选择...</option>

                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">分类名称</td>
                        <td style="font-family:'宋体';">
                            <input type="text" value="" class="add_ipt" id="classifyName"/>（必填）
                            <input type="hidden" name="id" value="" id="id">
                        </td>
                    </tr>
                </table>
                <p align="right">
                    <br>
                    <a onclick="mySaveUpdate();" class="add_b">确认操作</a>
                </p>
            </div>
        </div>
    </div>
    <%@ include file="/common/client/footer.jsp" %>
</div>
</body>
<script>

    // 1. 在文档加载完成时执行一次
    $(document).ready(onDocumentReady());

    // 2. 定义文档加载完成时执行的函数
    function onDocumentReady() {
        // 3. 发起 AJAX 请求获取数据
        $.ajax({
            url: "/contendisplaytwo",
            method: "GET",
            dataType: "json",
        }).done(function (data) {
            // 4. 初始化一个空的HTML字符串
            var html = "";
            newall = data;
            console.log(data);

            // 5. 将数据分块，每块包含4个数据项
            news = chunk(data, 4);
            console.log(news);

            // 6. 调用 eachAll 函数
            eachAll(position);
        });
    };

    // 7. 定义 eachAll 函数，用于生成HTML表格
    function eachAll(page) {
        // 8. 初始化一个包含表头的HTML字符串
        let html = '<tr>' +
            '<td width="20%">分类名称</td>' +
            '<td width="25%">分类级别</td>' +
            '<td width="25%">父级分类</td>' +
            '<td width="25%">操作</td>' +
            '</tr>';

        // 9. 检查是否 news 数组中的某一页不存在
        if (news[page] == undefined) {
            // 10. 更新 position 为上一页
            position = page - 1;

            // 11. 遍历数据生成表格行
            $.each(news[position], function (index, tGoods) {
                let categoryLabel = (tGoods.type === 1) ? '一级分类' : (tGoods.type === 2) ? '二级分类' : (tGoods.type === 3) ? '三级分类' : '未知分类';
                let parenta = parent(tGoods.parent_id);
                html += "<tr>" +
                    "<td>" + tGoods.classify_name + "</td>" +
                    "<td>" + categoryLabel + "</td>" +
                    "<td>" + parenta + "</td>" +
                    "<td><a href='ToClassify.jsp?id=" + tGoods.id + "' onclick='updataGoods(" + tGoods.id + ")'>修改</a>   <a onclick='deleteGoods(" + tGoods.id + ")'>删除</a></td>" +
                    "</tr>";

            });
        } else {
            // 12. 遍历数据生成表格行
            $.each(news[page], function (index, tGoods) {
                let categoryLabel = (tGoods.type === 1) ? '一级分类' : (tGoods.type === 2) ? '二级分类' : (tGoods.type === 3) ? '三级分类' : '未知分类';
                let parenta = parent(tGoods.parent_id);
                html += "<tr>" +
                    "<td>" + tGoods.classify_name + "</td>" +
                    "<td>" + categoryLabel + "</td>" +
                    "<td>" + parenta + "</td>" +
                    "<td><a href='ToClassify.jsp?id=" + tGoods.id + "' onclick='updataGoods(" + tGoods.id + ")'>修改</a>   <a onclick='deleteGoods(" + tGoods.id + ")'>删除</a></td>" +
                    "</tr>";

            });
        }

        // 13. 清空原表格内容并追加新的HTML
        $("#trhood").empty();
        $("#trhood").append(html);
    };

    // 14. 定义 mySaveUpdate 函数，用于处理添加分类操作
    function mySaveUpdate() {
        // 15. 获取表单中的值
        var type = document.getElementById("type").value;
        var class1 = document.getElementById("classifyLevel1").value;
        var class2 = document.getElementById("classifyLevel2").value;
        var classname = document.getElementById("classifyName").value;

        console.log(type, class1, class2, classname);

        // 16. 根据分类级别执行相应操作
        if (type == 1) {
            if (classname != "") {
                mySaveUpdateTwo(classname, "0", "1");
            } else {
                showMessage("分类名称不可为空");
            }
        } else if (type == 2) {
            if (classname != "") {
                mySaveUpdateTwo(classname, class1, "2");
            } else {
                showMessage("分类名称不可为空");
            }
        } else if (type == 3) {
            if (classname != "") {
                mySaveUpdateTwo(classname, class2, "3");
            } else {
                showMessage("分类名称不可为空");
            }
        }
    }

    // 17. 定义 mySaveUpdateTwo 函数，用于发送添加分类的 AJAX 请求
    function mySaveUpdateTwo(classname, class1, class2) {
        $.ajax({
            url: "/classInsert",
            data: {"class1": class1, "class2": class2, "classname": classname}
        }).done(function (data) {
            if (data == "true") {
                // 18. 添加成功后刷新数据并显示消息
                onDocumentReady();
                showMessage("添加成功");
            } else {
                showMessage("添加失败");
            }
        });
    }

    // 19. 获取页面元素
    var addClassifyElement = document.getElementById("addClassify");
    var showButton = document.getElementById("showButton");

    // 20. 监听按钮点击事件，切换添加分类表单的显示状态
    showButton.addEventListener("click", function () {
        if (addClassifyElement.style.display === "none" || addClassifyElement.style.display === "") {
            addClassifyElement.style.display = "block";
            showButton.textContent = "隐藏添加列表";
        } else {
            addClassifyElement.style.display = "none";
            showButton.textContent = "添加分类";
        }
    });

    // 21. 获取分类级别的选择框元素
    var classifyLevel1Element = document.getElementById("classifyLevel1");
    var classifyLevel2Element = document.getElementById("classifyLevel2");

    // 22. 监听分类级别选择框的值变化
    document.querySelector("#type").addEventListener("change", function () {
        var selectedValue = this.value;
        console.log(selectedValue);

        // 23. 根据不同的分类级别设置分类级别选择框的可用性并重置选项
        classifyLevel1Element.disabled = false;
        classifyLevel2Element.disabled = false;
        classifyLevel1Element.innerHTML = '<option value="0" selected="selected">请选择...</option>';
        classifyLevel2Element.innerHTML = '<option value="0" selected="selected">请选择...</option>';

        if (selectedValue === "2") {
            // 24. 选择一级分类，禁用二级分类选择框
            classifyLevel2Element.disabled = true;
            onDocumentReadyTWO();
        } else if (selectedValue === "3") {
            // 25. 选择二级分类，启用一级和二级分类选择框
            classifyLevel1Element.disabled = false;
            classifyLevel2Element.disabled = false;
            onDocumentReadyTWO();
        } else {
            // 26. 选择其他分类级别，禁用选择框并重置选项
            classifyLevel1Element.disabled = true;
            classifyLevel2Element.disabled = true;
            classifyLevel1Element.innerHTML = '<option value="0" selected="selected">请选择...</option>';
            classifyLevel2Element.innerHTML = '<option value="0" selected="selected">请选择...</option>';
        }
    });

    // 27. 定义处理二级分类选择框变化的函数
    function doSecondAjaxTWO() {
        document.querySelector("#classifyLevel1").addEventListener("change", function () {
            var selectedValue = this.value;

            // 28. 发起 AJAX 请求获取与所选一级分类相关的二级分类数据
            $.ajax({
                url: "/contendisplay?id=2&parent_id=" + selectedValue,
                method: "GET"
            }).done(function (data) {
                let html = "";
                // 29. 遍历数据生成二级分类的选项
                $.each(data, function (index, item) {
                    html += '<option value="' + item.id + '" >' + item.classify_name + '</option>';
                });
                $("#classifyLevel2").html(html);
            });
        });
    }

    // 30. 定义 onDocumentReadyTWO 函数，用于加载分类数据
    function onDocumentReadyTWO() {
        // 31. 发起第一个 AJAX 请求获取一级分类数据
        $.ajax({
            url: "/contendisplay?id=1",
            method: "GET"
        }).done(function (data) {
            dataAll = data;
            let html = "";
            // 32. 遍历数据生成一级分类的选项
            $.each(data, function (index, item) {
                if (item.type == 1) {
                    html += '<option value="' + item.id + '" selected="selected">' + item.classify_name + '</option>';
                }
            });
            $("#classifyLevel1").html(html);
        });

        // 33. 检查二级分类选择框是否已被禁用
        if (classifyLevel2Element.disabled === false) {
            // 34. 处理二级分类选择框的变化
            doSecondAjaxTWO();
        }
    };

    // 35. 声明全局变量
    var news;
    var position = 0;

    // 36. 定义删除分类的函数
    function deleteGoods(id) {
        // 37. 发起 AJAX 请求删除分类
        $.ajax({
            url: "/myDelectClassify",
            method: "GET",
            data: {"id": id},
        }).done(function (data) {
            if (data == "true") {
                // 38. 删除成功后刷新数据并显示消息
                onDocumentReady();
                showMessage("删除成功");
            } else {
                showMessage("删除失败");
            }
        });
    }

    // 39. 定义分页相关的函数
    function firstpage() {
        position = 0;
        eachAll(position);
    };

    function lastpage() {
        position = news.length - 1;
        eachAll(position);
    };

    function previouspage() {
        if (position > 0) {
            position = position - 1;
            eachAll(position);
        } else {
            showMessage("目前位置首页");
        }
    };

    function nextpage() {
        if (position < news.length - 1) {
            position = position + 1;
            eachAll(position);
        } else {
            showMessage("目前位置尾页");
        }
    };

    // 40. 定义用于分块数组的函数
    function chunk(arr, size) {
        let result = [];
        while (arr.length) {
            result.push(arr.splice(0, size));
        }
        return result;
    };

    // 41. 定义用于查找父级分类的函数
    function parent(dataone) {
        let parentCategory = "没有父类"; // 初始化为空

        $.each(news, function (index, aab) {
            for (let i = 0; i < aab.length; i++) {
                if (aab[i].id == dataone) {
                    parentCategory = aab[i].classify_name;
                    return false; // 退出内部 for 循环
                }
            }
            if (parentCategory !== "没有父类") {
                return false; // 退出外部 $.each 循环，如果找到匹配的分类
            }
        });

        return parentCategory; // 返回父级分类
    };


</script>
</html>


